
<template>
<div :class="['container',{'wap':isMobile}]">
    <div class="btns" v-if="isMobile">
        <img :src="img1_m" alt="" class="btn btn1" @click="$router.replace('/scene')">
        <img :src="img2_m" alt="" class="btn btn2" @click="$router.replace('/game2')">
    </div>
    <div class="btns" v-else>
        <img :src="img1" alt="" class="btn btn1" @click="$router.replace('/scene')">
        <img :src="img2" alt="" class="btn btn2" @click="$router.replace('/game2')">
       
    </div>
    
</div>
</template>

<script setup>
    import img1 from './images/button1.png';
    import img2 from './images/button2.png';
    import img1_m from './images/button1_m.png';
    import img2_m from './images/button2_m.png';
    import { inject } from 'vue';
    const isMobile = inject('isMobile');
    
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
    .container {
        position:relative;
        width:100%;
        height:100%;
        background:url(./images/bg.png)center no-repeat;
        background-size:cover;
        background-size:100% 100%;
        .btns {
            position:absolute;
            bottom:4.167vh;
            right:8.33vw;
            .btn {
                margin-left:7.7vw;
                cursor:pointer;
            }
        }
        &.m {
            background:url(./images/mbg.jpg)center/100% no-repeat;
            height:216.533vw;
            .btns {
                right:20vw;
                bottom:22vw;
                .btn {
                    width:8vw;
                    margin-left:18.667vw;
                }
            }
        }
        &.wap {
            background:url(./images/mbg.png)center/100% no-repeat;
            background-size:100% 100%;
            .btns {
                left:5vw;
                bottom:0.5vw;
                .btn {
                    display:block;
                    width:30.6vw;
                    margin-bottom:8vw;
                    margin-left:0;
                }
            }
        }
    }
    
</style>